<template>
  <t-card title="护理项目条件查询" :bordered="false" hover-shadow>
    <!-- 插槽，右上角的操作区域
          css中动态计算样式的： 不同的单位可以相加
          ref：是为了js中操作dom，找到dom用的，提交的时候会用到
        -->
    <t-form :data="formData" labelWidth="calc(8em + 24px)" layout="inline" ref="nusrong_project_form" @reset="onReset"
      @submit="onSubmit">
      <t-form-item label="预约人姓名" name="name">
        <t-input v-model="formData.name" placeholder="请输入预约人手机号"></t-input>
      </t-form-item>
      <t-form-item label="预约人手机号" name="mobile">
        <t-input v-model="formData.mobile" placeholder="请输入预约人手机号"></t-input>
      </t-form-item>
      <t-form-item label="开始时间" name="startTime">
        <t-date-picker v-model="formData.startTime" enable-time-picker allow-input clearable
          format="YYYY-MM-DD hh:mm:ss" />
      </t-form-item>
      <t-form-item label="结束时间" name="endTime">
        <t-date-picker v-model="formData.endTime" enable-time-picker allow-input clearable
          format="YYYY-MM-DD hh:mm:ss" />
      </t-form-item>

      <t-button theme="default" variant="base" type="reset">重置</t-button>
      <t-button theme="primary" type="submit">查询</t-button>

    </t-form>
  </t-card>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 护理项目条件查询表单
const formData = ref({
  name: '',
  mobile: '',
  startTime: '',
  endTime: ''
})

const emits = defineEmits(['query'])


// 条件查询提交
function onSubmit() {

  // 通知父组件做查询操作
  emits('query', formData.value)
}

function onReset() {
  formData.value = {
  }
}
</script>
